<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/static/home/layui/layui/css/layui.css"  media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body style="background: #fff;padding: 10px 20px;">

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>我的画廊</legend>
</fieldset>
<div class="site-demo-flow flow-default" id="LAY_demo1"></div>

<script src="/static/home/layui/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    layui.use(['flow','jquery'], function(){
        var flow = layui.flow, $ = layui.$;
        flow.load({
            elem: '#LAY_demo1' //流加载容器
            ,scrollElem: '#LAY_demo1' //滚动条所在元素，一般不用填，此处只是演示需要。
            ,isAuto: true
            ,isLazyimg: true
            ,done: function(page, next){ //执行下一页的回调
                $.ajax({
                    //几个参数需要注意一下
                    type: "POST",//方法类型
                    dataType: "json",//预期服务器返回的数据类型
                    url: "/system/img_show_json" ,//url
                    data: {"page":page},
                    success: function (result) {
                        if (result.code == 200) {
                            //模拟数据插入
                            setTimeout(function(){
                                var lis = [];
                                layui.each(result, function(index, value){
                                    lis.push('<img lay-src="'+value.ImgThumb+'">');
                                });
                                next(lis.join(''), page <= result.count ); //假设总页数为 10
                            }, 500);
                        }else{
                            layer.msg("获取数据异常")
                        }
                    },
                });
            }
        });

        //按屏加载图片
        flow.lazyimg({
            elem: '#LAY_demo3 img'
            ,scrollElem: '#LAY_demo3' //一般不用设置，此处只是演示需要。
        });

    });
</script>

</body>
</html>